<template>
  <div id="about" class="about">
    <div class="item_touxiang_img">
      <img class="one_img" src="../assets/logo.png" />
      <div class="item_about_shou_div">
        <div class="item_about_shou_top_div">
          <p>热心市民展展</p>
          <p>ID: 1069643013</p>
        </div>
        <div class="item_about_shou_bottom_div">
          <div class="guide_item">
            <span class="span1">红包</span>
            <span class="span2">88</span>
          </div>
          <div class="guide_item">
            <span class="span1">优惠券</span>
            <span class="span2">12张</span>
          </div>
          <div class="guide_item">
            <span class="span1">鲜豆</span>
            <span class="span2">218</span>
          </div>
          <div class="guide_item">
            <span class="span1">白条</span>
            <span class="span2">1000</span>
          </div>
        </div>
      </div>
      
      <div class="about_bottom_div">
        <div class="about_bottom_item_div"><img id="img_bottom" src="../assets/logo.png">我的钱包<span class="span_item">></span></div>
        <div @click="tiao()" class="about_bottom_item_div"><img id="img_bottom" src="../assets/logo.png">我的地址<span class="span_item">></span></div>
        <div class="about_bottom_item_div"><img id="img_bottom" src="../assets/logo.png">客服与帮助<span class="span_item">></span></div>
      </div>
    </div>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        
      }
    },methods:{
      tiao(){
        this.$router.push('/add');
      }
    }
  }
</script>
<style>
  #about {
    background-color: #F8F8F8;
    height: 100%;
    position: fixed;
    width: 100%;
  }
  * {
    margin: 0;
    padding: 0;
  }

  .about {
    text-align: center;
  }

  .item_touxiang_img {
    background-image: linear-gradient(239deg, #3A6FF3 0%, #50C7FB 100%);
    height: 250px;
    border-bottom-right-radius: 40%;
    border-bottom-left-radius: 40%;
  }

  .item_touxiang_img .one_img {
    height: 94px;
    width: 94px;
    border-radius: 50%;
    margin-top: 61px;
  }

  .item_about_shou_div {
    margin-left: 18px;
    margin-right: 18px;
    background: #FFFFFF;
    border-radius: 8px;
    height: 203px;
    margin-top: -50px;
  }
  .about_bottom_item_div{
    height: 48px;
    line-height: 48px;
    text-align: left;
    padding-left: 16px;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #262626;
  }
  .about_bottom_item_div #img_bottom{
    height: 22px;
    width: 22px;
    background: #32C5FF;
    border-radius: 8px;
    margin-right: 12px;
  }
  .span_item{
     float:right;
     padding-right: 16px;
   }
  .item_about_shou_top_div {
    padding-top: 59px;
    border-bottom: 1px  #F1F1F1 solid;
  }

  .item_about_shou_top_div :nth-child(1) {
    font-family: PingFangSC-Regular;
    font-size: 24px;
    color: #262628;
    letter-spacing: 0.19px;
    text-align: center;
    line-height: 36px;
  }

  .item_about_shou_top_div :nth-child(2) {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #C1C0C9;
    text-align: center;
  }
  .item_about_shou_bottom_div{
    display: flex;
    justify-content: space-between;
  }
  .about_bottom_div{
    height: 146px;
    margin-left: 18px;
    margin-top: 16px;
    margin-right: 18px;
    background: #FFFFFF;
    background: #FFFFFF;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    border-radius: 8px;
  }
  .guide_item{
    display: flex;
    flex: 1;
    text-align: center;
    flex-direction: column;
    align-items: center;
  }
  .span1{
    padding-top: 12px;
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #C1C0C9;
    text-align: center;
  }
  .span2{
    padding-top: 3px;
    font-family: PingFangSC-Regular;
    font-size: 20px;
    color: #262628;
    text-align: center;
  }
</style>